<template>






    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <el-button type="primary" @click="opendialog()">添加配送员</el-button>


            <el-table size="large" :data="tableData.rows" :header-cell-style="{
                backgroundColor: '#ccddff', color: '#515a6e', fontWeight: 'normal'
            }">
                <el-table-column prop="_id" label="ID" width="250" />
                <el-table-column prop="avatar" label="头像" width="60px">
                    <template #default="scope">
                        <el-avatar shape="square" :src="scope.row.avatar" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="120" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="state" label="是否显示" width="90">

                    <template #default="{ row }">

                        <el-switch v-model="row.state"
                         inline-prompt active-text="是" 
                         inactive-text="否" 
                         :active-value="1"
                        :inactive-value="0" />

                    </template>


                </el-table-column>


                <el-table-column prop="time" label="添加时间">

                    <p style="width: 300px;">2024-10-25 11:59:19</p>

                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="{ row }">
                        <el-button type='primary' text @click="opendialog(row)">
                            编辑
                        </el-button>
                        <el-button type="primary" text @click="deleteconfirm(row._id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>



            <!-- 分页 -->
            <div class="page-container">
                <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                    :page-sizes="[10, 200, 300, 400]" :background="true" layout="total, 
            sizes, prev, pager, next, jumper" :total="tableData.total" />
            </div>


        </el-card>

    </div>
    <!-- 新增和修改配送员弹窗 -->
    <!-- <Window v-model="open"></Window> -->
    <CouriersDiaog ref="dialogref" @getGroupData="getGroupData" />
</template>

<script setup lang="ts">
import CouriersDiaog from './CouriersDiaog.vue';
import { reactive, ref, useTemplateRef, watch } from 'vue'
import { ElMessage,ElMessageBox}from 'element-plus'
import { onMounted } from 'vue';
import api from '../../../api';
// import { log } from 'console';



onMounted(() => {
    getGroupData();

})
const tableData = reactive({
    rows: [],//表格数据
    total: 0//表格数据总条数
})
// let open = ref(false)


// const tableData = [
//     {
//         date: '80',
//         avatar:'头像',
//         name: 'Tom',
//         phone: '1233456',
//         time: '2003-2-3'

//     },
//     {
//         date: '80',
//         avatar:'头像',
//         name: 'Tom',
//         phone: '1233456',
//         time: '2003-2-3'
//     },
//     {
//         date: '80',
//         avatar:'头像',
//         name: 'Tom',
//         phone: '1233456',
//         time: '2003-2-3'
//     },

//]

const pageData = ref({
    currentPage: 1,
    pageSize: 10

})
//深度侦听器
watch(pageData, () => {
    getGroupData()
}, {
    deep: true
})





let getGroupData = () => {
    api.couriers.search(pageData.value)
        .then(res => {
            console.log(res);
            if (res.code == 200) {
                tableData.rows = res.data.rows;
                tableData.total = res.data.total
            }

        })

}


let dialogref = useTemplateRef('dialogref')

let opendialog = (data?: any) => {
    //通过dialogref.value获取到子组件
    //再调用子组件中的opendialog方法
    //!非空断言，意思是不是undefind,一定能拿到子组件
    dialogref.value!.opendialog(data);
}

let deleteconfirm=(_id:string)=>{
    ElMessageBox.confirm(
    '数据删除后不可恢复，确认删除?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    handledelete(_id)
   
    })
    .catch(() => {
     
    })
}


let handledelete=(_id:string)=>{
api.couriers.remove({
_id
}).then(res=>{
console.log(res);
if(res.code==200){
    ElMessage.success('删除成功')
    getGroupData()
}else{
    ElMessage.error(res.message)
}

})
}




</script>

<style scoped>
.el-table {
    margin-top: 20px;
}



.demo-basic .block {
    flex: 1;
}

.page-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>